<template>
	<view class="page">
    <fu-custom bgColor="text-white" isBack="true"></fu-custom>
    <view class="title">{{i18n['恭喜你!成功挑到喜欢的宝贝']}}</view>
    <view class="container">
		<view class="block-300 radius overHidden">
			<fu-image :src="goodsImage" mode="aspectFill"></fu-image>
		</view>
    </view>
    <view class="action">
      <block v-if="firstBargain">
        <view>
          <text class="text-bold text-xxl">{{i18n['成功砍掉']}}<text class="text-sl text-color">{{cut_price}}</text>{{i18n['元']}}</text>
        </view>
        <view class="margin-top">
          <view class="desc-tag">
            <view class="cu-tag radius bg-theme text-white text-bold">{{i18n['剩']}}{{progress}}%{{i18n['免费拿']}}</view>
          </view>
          <view class="cu-progress round margin-top-xs">
            <view class="button-color round" :style="[{ width: (100 - progress)+'%'}]">{{100 - progress}}%</view>
          </view>
          <view class="number-rule">
            <text>10%</text>
            <text>50%</text>
            <text>90%</text>
          </view>
        </view>
      </block>
      <view class="margin-top">
        <button v-if="!firstBargain" class="action-button button-color cu-btn round" @click="handleBargain">{{i18n['自己砍一刀']}}</button>
        <button v-else class="action-button button-color cu-btn round" @click="handleInvitation">{{i18n['邀请好友帮砍']}}</button>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        firstBargain: false,
        goodsImage: '',
        bargainId: '',
        cut_price: 0,
        progress: 100,// 砍价剩余进度
			}
		},
    computed: {
      uid(){
        return this.$store.getters.uid;
      }
    },
    onLoad(options) {
      const {goods_id,sku_id,activity_id,goods_image,bargain_id} = options;
      this.goodsImage = goods_image;
      this.bargain_id = bargain_id;
    },
		methods: {
      handleBargain(){
        let data = {
          bargain_id: this.bargain_id,
          user_id: this.uid,
        };
        this.$api.post(global.apiUrls.postBargain,data)
        .then(res => {
          console.log('res',res);
          if(res.data.code == 1){
            this.firstBargain = true;
            this.cut_price = res.data.data.cut_price;
            this.progress = res.data.data.surplus_percentage;
          }

        })
      },
      handleInvitation(){
        uni.redirectTo({
          url: '/pages/activity/bargain/bargain-log/index?bargain_id='+this.bargain_id
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
  .page{
    height: 100vh;
    background: linear-gradient(#ff5834,#fed892);
  }
  // 标题
  .title{
    height: 120rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    line-height: 120rpx;
    text-shadow: 10rpx 10rpx 0 $theme;
  }
  .container{
    height: 500rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .action{
    margin: 0 32rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 50rpx;
    .desc-tag{
      display: flex;
      justify-content: flex-end;
    }
    .number-rule{
      display: flex;
      padding: 0 20rpx;
      justify-content: space-between;
      margin-top: 10rpx;
    }

    .action-button{
      width: 100%;
      height: 88rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 10rpx;
      animation: heart 0.8s infinite;
    }
  }
  // 公共样式
  .block-300{
    width: 300rpx;
    height: 300rpx;
  }
  .button-color{
    background: linear-gradient(left,#f3400a,#fa9500);
  }
  .text-color{
    color: $theme;
  }
  @keyframes heart{
  	0%{
  		transform: scale(1);
  	}
  	60%{
  		transform: scale(0.9);
  	}
  	100%{
  		transform: scale(1);
  	}
  }
</style>
